HTML5 新特性

[新特性]https://segmentfault.com/a/1190000003989795

特性一： 正则表达式

<input type="email" pattern="[^ @]*@[^ @]*" value="">

服务器端检测，浏览器本地判断电子邮箱地址，非常重要

特性二： 数据列表元素

在输入框，列表元素，实现auto-complete 一般需要js或者jquery。 不过用html5 的datalist就可以实现

<form action="/server" method="post">
    <input list="jslib" name="jslib" >
    <datalist id="jslib">
        <option value="jQuery">
        <option value="Dojo">
        <option value="Prototype">
        <option value="Augular">
    </datalist>
    <input type="submit" value="完成" />
</form>

特性三：下载属性

<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a>

前端html就可以实现下载某一个页面，不需要在服务器端写方法

特性四 ：DNS 预先加载处理

<link rel="dns-prefetch" href="//www.gbtags.com">
<link rel="dns-prefetch" href="//www.gbin1.com">
<link rel="dns-prefetch" href="//m.gbin1.com">
<link rel="dns-prefetch" href="//s.gbin1.com">

DNS 解析非常耗时， 往往导致网站加载速度变慢。 使用dns-prefetch 将域名缓存， 点击页面自动获取

特性五 ：链接网页的预先加载处理

<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />

都是预先加载，所有用的的属性一个 是 prefetch，这个是针对指定的地址，预加载一个网页或者网页中的特定的资源。

CSS3 新特性

盒模型： box model 是前端重要概念， 是元素大小的呈现方式

需要记住的是，everything in web design is a rectangular box

padding 进， margin远， content在最里面

S dingwe

CSS 定位方式

display 属性

使用最多的是block和内联级元素， 他们最大区别是block元素可以设置宽度，独占一行，inline元素宽度有内容决定，与其他元素并列

inline-block ： 常用于垂直居中

margin 用来隔开元素与元素之间的间距， padding 是用来隔开元素与内容之间的间距

只要不是float和绝对定位方式布局的 都在normal-flow里面